<template>
	<view class="goods">
		<view class="goods_box" v-for="(item,index) in dataList" :key="item.id">
			<view class="goods_top">
				<view class="goods_brand_name">
					<image :src="item.brandsLogo" mode=""></image>
					<text>{{item.brandsName}}</text>
				</view>
				<view class="goods_status_text">{{orderStatusText(item.status)}}</view>
			</view>
			<view class="goods_times">{{item.createTime}}</view>
			<view class="goods_content" @tap="goDetailes(item.id)">
				<view class="goods_info" v-if="item.orderGoods.length == 1">
					<image class="goods_info_img" :src="item.orderGoods[0].thumPic" mode=""></image>
					<view class="goods_info_text">
						<view class="goods_info_text_name">
							<text class="" v-if="item.orderGoods[0].presellOn">预售</text>{{item.orderGoods[0].name}}
						</view>
						<view class="goods_info_text_spec" v-if="item.orderGoods[0].skuProperties">
							<text v-for="(specItem, specIndex) in JSON.parse(item.orderGoods[0].skuProperties || '[]')"
								:key="specIndex">
								{{ specItem.value }}
								<text class="m-l-10 m-r-10"
									v-if="JSON.parse(item.orderGoods[0].skuProperties || '[]').length - 1 != specIndex">;</text>
							</text>
						</view>
						<view class="goods_info_text_spec" v-else>默认规格</view>
					</view>

				</view>
				<view class="goods_infos" v-if="item.orderGoods.length > 1">
					<scroll-view class="goods_infos_scroll" :scroll-x="true" :show-scrollbar="false">
						<view class="goods_infos_scroll_box">
							<view class="goods_infos_box" v-for="(goodItem,goodIndex) in item.orderGoods"
								:key="goodIndex">
								<image class="goods_infos_goods_img" :src="goodItem.thumPic" mode="">
								</image>
								<view class="goods_infos_tips" v-if="goodItem.presellOn">预售</view>
								<view class="goods_infos_goods_num">× {{goodItem.count}}</view>
							</view>
						</view>

					</scroll-view>
				</view>
				<view class="goods_info_price">
					<view class="goods_info_price_text">¥{{Number(item.totalMoney)}}</view>
					<view class="goods_info_price_num">共{{item.allCount}}件</view>
				</view>
			</view>
			<view class="goods_delivery_time">{{deliveryDate(item.orderGoods[0])}}</view>
			<view class="goods_btn">
				
				<!-- 待付款 -->
				<template v-if="[0].includes(Number(item.status))">
					<view class="goods_btn_item xjs-btn-primary" @tap="orderBtnFnc.goPayment(item)">去付款</view>
					<view class="goods_btn_item xjs-btn-primary-plain" @tap="orderBtnFnc.cancelOrder(item.id)">取消订单
					</view>
				</template>
				<!-- 已发货 -->
				<template v-if="[2].includes(Number(item.status))">
					<view class="goods_btn_item xjs-btn-primary" @tap="orderBtnFnc.confirmDelivery(item.id)">确认收货</view>
					<view class="goods_btn_item xjs-btn-primary-plain" @tap="orderBtnFnc.seeLogistics(item.id)">查看物流
					</view>
				</template>
				<!-- 已关闭 -->
				<template v-if="[4].includes(Number(item.status))">
					<view class="goods_btn_item xjs-btn-primary-plain" @tap="orderBtnFnc.buyAgain(item)">再次购买</view>
					<view class="goods_btn_item xjs-btn-primary-plain" @tap="orderBtnFnc.deleteOrder(item.id)">删除</view>
				</template>
				<!-- 再次购买按钮  -->
				<template v-if="![0,4].includes(Number(item.status))">
					<view class="goods_btn_item xjs-btn-primary-plain" @tap="orderBtnFnc.buyAgain(item)">再次购买</view>
				</template>
			</view>
		</view>
		<!-- 支付 -->
		<paymentPopup ref="paymentPopupRef" @cancel="paymentFun.payFail" @confirm="paymentFun.paySuccess"
			@fail="paymentFun.payFail"></paymentPopup>
		<!-- 支付 -->
	</view>


</template>

<script lang="ts" setup>
	import api from '@/api'
	import { reactive, ref } from 'vue'
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	import { useCartStoreToRefs, useCartStore } from "@/store/useCartStore";
	const { addCart } = useCartStore()
	import { getPresalesDelivery } from '@/pages/shopping/cart/util/cart.js';
	const popupRef = ref()
	const props = defineProps({
		dataList: {
			type: Object,
			default: []
		},
	})
	const emit = defineEmits(['getOrderData'])
	const flay = ref(true)
	//-- 支付
	const paymentPopupRef = ref()
	const paymentFun = reactive({
		paySuccess: () => {
			paymentPopupRef.value.close()
			emit('getOrderData')
		},
		payFail: () => {
			emit('getOrderData')
		},
		submit: (item) => {
			paymentPopupRef.value.open({
				orderId: item.id,
				payAmount: item.totalMoney,
				payBusinessType: 3,
				checkOrderType: "shopping"
			});
		}
	})
	// -- 支付
	const goDetailes = async (orderId) => {
		uni.navigateTo({
			url: `/pages/shopping/orderDetailes/index?orderId=${orderId}`
		})
	}
	const orderStatusText = (status : any) => {
		let text = ''
		switch (Number(status)) {
			case 0:
				text = '待付款'
				break
			case 1:
				text = '待发货'
				break
			case 2:
				text = '待收货'
				break
			case 3:
				text = '已完成'
				break
			case 4:
			case 7:
				text = '已关闭'
				break
			case 5:
				text = '已取消'
				break
			case 6:
				text = '已退款'
				break
		}
		return text
	}
	const orderBtnFnc = reactive({
		/* 	取消 */
		cancelOrder: async (orderId) => {
			uni.showModal({
				title: "取消订单",
				content: "订单还未付款，确定要取消吗？",
				confirmText: '再考虑下',
				cancelText: '取消订单',
				confirmColor: '#FF6084',
				success: async (res) => {
					if (res.confirm) {

					} else if (res.cancel) {
						const res : any = await api({
							method: 'POST',
							url: `/mall/shopping/order/iterat/cancel`,
							data: {
								id: orderId
							}
						})
						if (res.data) {
							toastfnc('取消成功！');
							emit('getOrderData')
						} else {
							toastfnc('取消失败！原因:' + `${res.data.msg}`);
							emit('getOrderData')
						}

					}
				}
			})
		},
		/* 付款 */
		goPayment: async (item) => {
			paymentFun.submit(item)
		},
		/* 查看物流 */
		seeLogistics: async (orderId) => {
			uni.navigateTo({
				url: `/pages/shopping/logisticsDetails/index?orderId=${orderId}`
			})
		},
		/* 确认收货 */
		confirmDelivery: async (orderId) => {
			uni.showModal({
				title: "确认收货",
				content: "确认商品已收到？",
				confirmText: '确认',
				cancelText: '取消',
				confirmColor: '#FF6084',
				success: async (res) => {
					if (res.confirm) {
						const res : any = await api({
							method: 'POST',
							url: `/mall/shopping/order/completed/${orderId}`

						})
						if (res.data) {
							toastfnc('确认收货成功！');
							emit('getOrderData')
						} else {
							toastfnc('确认收货失败！原因:' + `${res.data.msg}`);
							emit('getOrderData')
						}
					} else if (res.cancel) {

					}
				}
			})
		},
		/* 修改地址 */
		modifyAddress: async () => {

		},
		/* 删除订单 */
		deleteOrder: async (orderId) => {
			uni.showModal({
				title: "确认删除订单？",
				content: "删除后订单不可恢复",
				confirmText: '确认删除',
				cancelText: '取消',
				confirmColor: '#FF6084',
				success: async (res) => {
					if (res.confirm) {
						const res : any = await api({
							method: 'DEL',
							url: `/mall/shopping/order/${orderId}`
						})
						if (res.data) {
							toastfnc('订单删除成功！');
							emit('getOrderData')
						} else {
							toastfnc('订单删除失败！原因:' + `${res.data.msg}`);
							emit('getOrderData')
						}
					} else if (res.cancel) {

					}
				}
			})
		},
		/* 再次购买 */
		buyAgain: async (item) => {
			let arr1 = item.orderGoods;
			if (item.orderGoods[0].isDelete == 1) {
				toastfnc('暂不支持再次购买！');
				return;
			} else {
				const res : any = await api({
					method: 'GET',
					url: `/mall/shopping/order/new/getIsBuyOrderGoods/${item.id}`,
				})
				if (res.data) {
					if (res.code === 0) {
						arr1.forEach((item) => {
							res.data.forEach((citem) => {
								if (item.id == citem.orderGoodsId) {
									item.isBuy = citem.isBuy;
									item.zsStatus = citem.status;
								}
							});
						});
						btnVerification(arr1);
					}
				} else {
					toastfnc(res.msg);
				}
			}
		}

	})
	/* 发货时间 */
	const deliveryDate = (goodInfo) => {
		const presalesDelivery = getPresalesDelivery(goodInfo);
		if (presalesDelivery) {
			return presalesDelivery;
		} else if (goodInfo.spotDeliveryTypeMsg) {
			return goodInfo.spotMsg;
		}
	}

	//加入购物车或立即购买前的验证
	const btnVerification = async (item) => {
		let arr = [];
		console.log(item, 'item')
		for (let i = 0; i < item.length; i++) {
			if (!item[i].isBuy || item[i].zsStatus != 1) {
				let goodsInfo = {};
				goodsInfo.amount = item[i].count;
				goodsInfo.skuCode = item[i].skuCode;
				goodsInfo.id = item[i].goodsId;
				arr.push(goodsInfo);
			}
		}
		if (arr.length == 0) {
			toastfnc('暂不支持再次购买！');
			return;
		}
		if (flay.value) {
			flay.value = false;
			const params = {
				addType: 1,
				arr: arr,
				ifRadio: false,
				isWaiting: true,
				arrType: 1,
			};
			const res : any = await addCart(params);
			if (res.code == 0) {
				toastfnc('加入购物车成功！');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/shopping/cart/index'
					});
				}, 1000);
			}
			flay.value = true;
		}
	}
	const toastfnc = (tipsText : string) => {
		uni.showToast({
			title: tipsText,
			icon: 'none'
		})

	}
</script>

<style lang="scss" scoped>
	.goods_box {
		margin-bottom: 24rpx;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 24rpx;
		line-height: 1;

		.goods_top {
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.goods_brand_name {
				display: flex;
				align-items: center;
				width: 85%;

				image {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 4rpx;
					flex-shrink: 0;
				}

				text {
					font-size: 32rpx;
					color: #1B2120;
					font-weight: bold;
				}
			}

			.goods_status_text {

				font-size: 26rpx;
				color: #6363FF;
			}
		}

		.goods_times {
			//margin-bottom: 16rpx;
			margin-bottom: 40rpx;
			font-size: 24rpx;
			color: #808080;
		}

		/* .goods_order_num {
			margin-bottom: 48rpx;
			font-size: 24rpx;
			color: #808080;
		} */

		.goods_content {
			margin-bottom: 16rpx;
			display: flex;
			position: relative;

			.goods_info {

				display: flex;

				.goods_info_img {
					margin-right: 16rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 24rpx;
				}

				.goods_info_text {
					width: 334rpx;

					.goods_info_text_name {
						margin-bottom: 16rpx;
						margin-top: -6rpx;
						width: 322rpx;
						color: #1b2120;
						line-height: 1.4;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 限制显示的行数为2 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						text {
							display: inline-block;
							margin-top: 4rpx;
							margin-right: 4rpx;
							width: 64rpx;
							height: 32rpx;
							border-radius: 20rpx;
							border: 1rpx solid #6363ff;
							line-height: 34rpx;
							text-align: center;
							color: #6363ff;
							font-size: 24rpx;
							font-weight: normal;
						}
						font-size: 30rpx;
						color: #1B2120;
					}

					.goods_info_text_spec {
						font-size: 24rpx;
						color: #808080;
					}
				}
			}

			.goods_infos {
				width: 520rpx;

				.goods_infos_scroll {
					width: 100%;

				}

				.goods_infos_scroll_box {
					display: flex;
				}

				.goods_infos_box {
					flex-shrink: 0;
					margin-right: 16rpx;
					position: relative;
					width: 160rpx;
					height: 160rpx;
					border-radius: 24rpx;
					overflow: hidden;

					.goods_infos_goods_img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 24rpx;
					}

					.goods_infos_tips {
						position: absolute;
						top: 16rpx;
						left: 16rpx;
						padding: 6rpx 8rpx;
						font-size: 24rpx;
						color: #6363FF;
						background: #FFFFFF;
						border-radius: 64rpx;
					}

					.goods_infos_goods_num {
						position: absolute;
						bottom: 0;
						right: 0;
						background: rgba(0, 0, 0, 0.35);
						padding: 8rpx;
						border-radius: 24rpx 0 0 0;
						font-size: 20rpx;
						color: #fff;
					}
				}
			}

			.goods_info_price {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 128rpx;
				height: 160rpx;
				box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);
				position: absolute;
				right: -32rpx;

				.goods_info_price_text {
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: #FF6084;
					font-weight: bold;
				}

				.goods_info_price_num {
					font-size: 24rpx;
					color: #7C807F;
				}
			}
		}

		.goods_delivery_time {
			margin-top: -6rpx;
			margin-bottom: 32rpx;
			line-height: 1.4;
			font-size: 24rpx;
			color: #6363FF;
		}

		.goods_btn {
			display: flex;
			flex-direction: row-reverse;

			.goods_btn_item {
				margin-left: 16rpx;
				width: 196rpx;
				height: 72rpx;
			}
		}
	}
</style>